<template>
	<scroll-view class="scroller-nav-container" scroll-x scroll-with-animation :scroll-left="scrollLeft">
		<view class="tpf-promotion-nav-container" :style="navStyle+';width:'+scrollerContainerWidth+'px'">
			<view class="tpf-promotion-nav-item" v-for="(tab,tabIndex) in navTabs" :key="'tab'+tabIndex" :class="['tpf-promotion-nav-item'+tabIndex]" @tap="tabSelect" :data-id="tabIndex" :style="tabIndex==tabCurrentIndex ? tabActiveStyle:tabStyle">
				<text class="tpf-promotion-nav-text" :style="tabIndex==tabCurrentIndex ?textActiveStyle:textStyle">{{tab}}</text>
			</view>
			<view v-if="showUnderLine" class="tpf-promotion-nav__underline" :style="lineStyle+';width:'+underlineWidth+'px;left:'+underlineOffsetLeft+'px'"></view>
		</view>
	</scroll-view>
</template>

<script>

export default{
	props:{
		navTabs:{
			type:Array,
			default:function(){
				return [
					"tab1",
					"tab2",
					"tab3",
				]
			}
		},
		navStyle:{
			type:String,
			default:""
		},
		tabStyle:{
			type:String,
			default:""
		},
		tabActiveStyle:{
			type:String,
			default:""
		},
		textStyle:{
			type:String,
			default:""
		},
		textActiveStyle:{
			type:String,
			default:""
		},
		lineStyle:{
			type:String,
			default:""
		},
		showUnderLine:{
			type:Boolean,
			default:true
		}
	},
	data(){
		return {
			windowWidth:0,
			windowHeight:0,
			
			tabCurrentIndex: 0,
			scrollLeft: 0,
			
			underlineWidth:0,
			underlineOffsetLeft:0,
			
			scrollerContainerWidth:0
		}
	},
	mounted() {
		let system = uni.getSystemInfoSync();
		this.windowWidth = system.windowWidth;
		this.windowHeight = system.windowHeight;
		
		this.$nextTick(async function(){
		
			const selector = uni.createSelectorQuery().in(this);
			selector.selectAll(".tpf-promotion-nav-item").fields({size:true});
			selector.exec(data=>{
				data[0].forEach((item,index)=>{
					if(index==0) this.underlineWidth = item.width;
					this.scrollerContainerWidth += item.width;
				});
			});
		});
	},
	methods:{
		tabSelect(e) {

		    this.tabCurrentIndex = e.currentTarget.dataset.id;

			uni.createSelectorQuery().in(this).select(".tpf-promotion-nav-item"+this.tabCurrentIndex).boundingClientRect(rect=>{

				let distance = e.currentTarget.offsetLeft + rect.width/2 - uni.getSystemInfoSync().windowWidth/2;
				
				this.scrollLeft = distance<0 ? 0:distance;
				
				this.underlineWidth = rect.width;
				
				this.underlineOffsetLeft = e.currentTarget.offsetLeft;
				
			}).exec();
			
			this.$emit("tapNav",this.tabCurrentIndex);
		},
	}
}
</script>

<style lang="scss">
.tpf-promotion-nav-container{
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	position: relative;
	align-items: center;
}
.tpf-promotion-nav-container .tpf-promotion-nav-item{
	padding: $uni-padding-size-sm $uni-padding-size-sm;
	color: $uni-text-color-grey;
	font-size: $uni-font-size-mi;
}
.tpf-promotion-nav-text{
	line-height:80rpx;
	white-space: nowrap;
}
.tpf-promotion-nav-active-text{
	color: #FF0000;
}
.tpf-promotion-nav__underline{
	position: absolute;
	bottom: 0rpx;
	left: 0;
	width: 40px;
	border-bottom:3px #FF0000 solid;
}
</style>
